import React, { Component } from 'react'
import css from "../index.module.css"; 
import { NavLink } from 'react-router-dom';
import MenuChildrenItem from "./index";

export default class MenuItem extends Component {
  render() {
    const {menuList} = this.props
    return (
      <div>
        {
          menuList.map(item => {
            return <div key={item.path}>
              {/* replace代表改 Link跳转时无痕的 */}
              <NavLink replace activeClassName="active" className={css.menuItem} to={item.path}>{item.name}</NavLink>
              { 
                item.children && <div className={css.subItem}><MenuChildrenItem menuList={item.children}/></div>
              }
            </div>
          })
        }
      </div>
    )
  }
}
